<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写数字识别系统</title>
    <link rel="stylesheet" href="/static/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header>
            <h1>手写数字识别系统</h1>
            <p>上传手写数字图片，系统将自动识别数字</p>
        </header>

        <div class="upload-area" id="uploadArea">
            <input type="file" id="imageInput" accept="image/*" hidden>
            <div class="upload-box" onclick="document.getElementById('imageInput').click()">
                <img src="/static/icon/upload-icon.png" alt="上传图标" class="upload-icon">
                <p>点击或拖拽文件到此处</p>
                <p class="small">支持 PNG, JPG 格式</p>
            </div>
            <button class="upload-btn" onclick="uploadImage()">开始识别</button>
        </div>

        <div class="result-area" id="resultArea" style="display: none;">
            <div class="image-preview">
                <img id="previewImage" src="" alt="预览图">
            </div>
            <div class="result-info">
                <h2>识别结果</h2>
                <div class="result-item">
                    <span class="label">数字:</span>
                    <span class="value" id="predResult">-</span>
                </div>
                <div class="result-item">
                    <span class="label">置信度:</span>
                    <span class="value" id="confidence">-</span>
                </div>
                <div class="result-item">
                    <span class="label">文件名:</span>
                    <span class="value" id="filename">-</span>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/script.js"></script>
</body>
</html>
